<template>
  <!-- 职业类别 -->
  <div>
    <div class="pb-[15px] px-[15px]">
      <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
        <div class="text-[14px] min-w-[100px]">证件类型</div>
        <div
          class="ml-[10px] flex justify-between items-center w-full"
          @click="openPop"
        >
          <div class="text-[#c8c9cc] text-[14px]">
            <!-- {{ Info.category ? Info.category : "请选择证件类型" }} -->
            全日制在校学生
          </div>
          <!-- <div><van-icon name="arrow" /></div> -->
        </div>
      </div>
    </div>
    <!-- <div>
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          title="证件类型"
          :columns="category"
          @confirm="onConfirm"
          :columns-field-names="{ text: 'name_three', value: 'code_three' }"
        />
      </van-popup>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, defineProps, watchEffect } from "vue";
// import { useRoute } from "vue-router";
const props = defineProps({
  category: { type: Array },
  Info: { type: Object }, //回显数据
  edit: { type: Boolean },
});

const show = ref(false);
const Info = reactive<categoryInfoType>({
  job_code: "",
  category: "",
});
const category = ref([] as any);
const openPop = () => {
  if (!props.edit) return;
  show.value = true;
};
//确认选择
// const onConfirm = (val: any) => {
//   // console.log(val.selectedOptions[0].code_three);
//   Info.job_code = val.selectedOptions[0].code_three;
//   Info.category = val.selectedOptions[0].name_three;
//   // console.log(val.selectedOptions);

//   show.value = false;
// };
watchEffect(() => {
  if (props.Info) {
    let key: keyof categoryInfoType;

    for (key in Info) {
      Info[key] = props.Info[key];
    }
  }
  if (props.category) {
    category.value = props.category;
    // console.log(props.category);
  }
});
defineExpose({
  Info,
});
</script>
<style scoped lang="scss"></style>
